<template>
	<view class="share">
		<view class="" id="containert">
			<image :src="httpUrl+'1889958989274656770'" mode="aspectFill">
			</image>
			<text class="topText">购生活 享免单</text>
			<text class="text_1">海量商品服务，邀请助力全免单</text>
			<view class="list">
				<view class="listItem" v-for="(item,index) in 6" :key="index"
					:style="info.freeList[index]?'':'background:none;'">
					<view class="img" v-if="info.freeList[index]">
						<image :src="httpUrl+info.freeList[index].fileId" mode="aspectFill">
						</image>
					</view>
					<text v-if="info.freeList[index]" class="price">{{info.freeList[index].price}}</text>
				</view>
			</view>
			<view class="bot">
				<view class="left">
					<view class="top_1">{{info.freeAmount}}
						<text>{{info.remark}}</text>
					</view>
					<view class="bot_1">
						<view class="left">
							<image :src="httpUrl+info.publishUserAvatarId" mode="aspectFill">
							</image>
							<text class="ellipsis_1">{{info.publishUserName}}</text>
						</view>
						<view class="right">
							<view :style="{left:index*45+'rpx',zIndex:20-index}" class="item"
								v-for="(item,index) in info.inviteUsers" :key="index">
								<image v-if="item.userAvatarId" :src="httpUrl+item.userAvatarId" mode="aspectFill">
								</image>
								{{!item.userAvatarId?'?':''}}
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="left">
						<text>宜趣多资app</text>
						<text>扫码立刻参加</text>
					</view>
					<view class="code">
						<uv-qrcode ref="qrcode" size="84rpx"
							:value="JSON.stringify({dataType:'productFree',dataCode:info.freeCode})"></uv-qrcode>
					</view>
				</view>
			</view>
		</view>

		<view class="down">
			<view @tap="canvasToImage.getImage">
				<view class="">
					<image src="/static/img/freeShipping/14.png" mode="widthFix"></image>
				</view>
				分享
			</view>
			<view @tap="canvasToImage.getImage1">
				<view class="">
					<image src="/static/img/freeShipping/19.png" mode="widthFix"></image>
				</view>
				保存
			</view>
		</view>
		<view class="close" @tap="close">
			<image src="/static/img/index/198.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script module="canvasToImage" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			getImage(event, ownerInstance) {
				//containert为需要操作的dom节点，也就是定义的id值
				var dom = document.getElementById('containert');
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					dpi: 300,
					useCORS: true, //支持跨域，但好像没什么用
					// allowTaint: false
				}).then(function(canv) {
					let url = canv.toDataURL('image/jpg'); // base64数据
					//getImgToShare回调到主script的函数
					ownerInstance.callMethod('getImgToShare', {
						base64data: url,
					})
				});
			},
			getImage1(event, ownerInstance) {
			
				//containert为需要操作的dom节点，也就是定义的id值
				var dom = document.getElementById('containert');
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					dpi: 300,
					useCORS: true, //支持跨域，但好像没什么用
					allowTaint: false
				}).then(function(canv) {
					let url = canv.toDataURL('image/jpg'); // base64数据
					//getImgToShare回调到主script的函数
					ownerInstance.callMethod('getImgToAdd', {
						base64data: url,
					})
				});
			},
		}
	}
</script>


<script>
	import {
		requestAndroidPermission,
		gotoAppPermissionSetting
	} from '@/js_sdk/wa-permission/permission.js'
	export default {
		props: ['info'],
		data() {
			return {
				httpUrl: getApp().globalData.baseUrl + '/app/file/viewFile?fileId=',
			}
		},
		mounted() {
			console.log(this.info, 'info')
		},
		methods: {
			close() {
				this.$emit('close')
			},
			async getImgToAdd(data) {
				var result = await requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')
				console.log(result, 'result')
				if (result == -1) {
					uni.showModal({
						title: '提示',
						content: '需要保存图片的权限，请前往设置开启',
						success: res => {
							if (res.confirm) {
								// 根据平台调用相应的设置页面
								if (uni.getSystemInfoSync()
									.platform === 'android') {
									gotoAppPermissionSetting();
								} else {
									uni.showToast({
										title: '请手动前往设置开启权限',
										icon: 'none'
									});
								}
							}
						}
					});
					return;
				}
				let that = this
				let base64data = data.base64data;
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, () => {
					let url = '_downloads/yflPic' + Date.now() + '.png';
					console.log(url, 'url')
					this.url = url;
					bitmap.save(url, {}, (i) => {
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								uni.hideLoading()
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								bitmap.clear()
							},
							fail: () => {
			
								bitmap.clear()
							}
						});
					}, function(e) {
						bitmap.clear();
					});
				}, function() {
					bitmap.clear();
				});
			},
			getImgToShare(data) {
				let that = this
				let base64data = data.base64data;
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, () => {
					let url = '_downloads/yflPic' + Date.now() + '.png';
					console.log(url, 'url')
					this.url = url;
					bitmap.save(url, {}, (i) => {
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 2,
							imageUrl: i.target,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					}, function(e) {
						bitmap.clear();
					});
				}, function() {
					bitmap.clear();
				});
			},
		}
	}
</script>



<style lang="scss" scoped>
	.share {

		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		#containert {
			width: 586rpx;
			height: 947rpx;
			padding: 100rpx 20rpx 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			>image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			>view,
			>text {
				position: relative;
				z-index: 2;
			}

			.topText {
				font-family: 'MyFont1';
				// background: linear-gradient(to right, #FFFFFF, #FFFBE6);
				// -webkit-background-clip: text;
				// color: transparent;
				font-size: 80rpx;
				color: #fff;
			}

			.text_1 {
				padding: 6rpx 10rpx;
				border-radius: 8rpx;
				background-color: #FF434D;
				color: #FFFFFF;
				font-size: 24rpx;
				margin: 10rpx 0 32rpx 0;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				justify-content: space-between;
				padding: 0 20rpx;

				.listItem {
					width: 164rpx;
					height: 212rpx;
					padding: 14rpx 12rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-top: 10rpx;

					.img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
						margin-bottom: 10rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 16rpx;
						}
					}

					.price {
						color: #FF5233;
						font-size: 24rpx;

						&:before {
							content: '￥';
							color: #FF5233;
							font-size: 24rpx;
						}
					}
				}
			}

			>.bot {
				padding-top: 20rpx;
				border-top: 2rpx dashed #fff;
				margin-top: 30rpx;
				display: flex;
				width: 100%;
				align-items: center;

				>.left {
					flex: 1;

					.top_1 {
						&:before {
							content: '￥';
							color: #FF263F;
							font-size: 28rpx;
						}

						color: #FF263F;
						font-size: 32rpx;

						text {
							color: #FF263F;
							font-size: 20rpx;
						}
					}

					.bot_1 {
						display: flex;
						margin-top: 10rpx;

						.left {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							border: 2rpx solid #FF263F;
							position: relative;
							margin-right: 20rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}

							text {
								position: absolute;
								bottom: -10rpx;
								width: 74rpx;
								line-height: 30rpx;
								border-radius: 8rpx;
								background: linear-gradient(233deg, #FFA34B 0%, #FF8E6F 100%);
								font-size: 20rpx;
								color: #fff;
								text-align: center;
								left: 50%;
								margin-left: -37rpx;
							}
						}

						.right {
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							width: 0;
							position: relative;

							.item {
								top: 0;
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								background: rgba(255, 255, 255, 0.47);
								font-size: 18rpx;
								color: #fff;
								position: absolute;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
						}
					}
				}

				>.right {
					display: flex;
					align-items: center;

					.left {
						display: flex;
						flex-direction: column;

						text {
							color: #808080;
							font-size: 20rpx;
						}
					}

					.code {
						width: 84rpx;
						height: 84rpx;
						margin-left: 10rpx;
						border-radius: 8rpx;
						background-color: #fff;
					}
				}
			}
		}

		.down {

			display: flex;
			position: absolute;
			bottom: -180rpx;

			>view {
				font-size: 24rpx;
				color: #fff;
				display: flex;
				align-items: center;
				flex-direction: column;

				view {
					margin-bottom: 10rpx;
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 60rpx;
					}
				}
			}
			>view:nth-of-type(1){
				margin-right: 100rpx;
			}

		}

		.close {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: -40rpx;
			top: -56rpx;

			image {
				width: 30rpx;
			}
		}

	}
</style>